<template>
  <div class="order-management">
    <!-- 头部导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>会员中心</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="输入关键字进行搜索"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </template>
      </el-input>
    </div>

    <!-- 布局容器 -->
    <div class="layout-container">
      <!-- 左侧菜单 -->
      <!-- <el-aside width="200px"> -->
        <el-menu default-active="orders" @select="handleMenuSelect">
          <el-menu-item index="profile">账号管理</el-menu-item>
          <el-menu-item index="messages">消息通知</el-menu-item>
         <el-menu-item index="security">账号安全</el-menu-item>
          <el-menu-item index="points">我的积分</el-menu-item>
          <el-menu-item index="favorites">我的收藏</el-menu-item>
          <el-menu-item index="footprints">我的足迹</el-menu-item>
          <el-menu-item index="transactions">交易管理</el-menu-item>
          <el-menu-item index="orders">订单管理</el-menu-item>
          <el-menu-item index="coupons">优惠券</el-menu-item>
          <el-menu-item index="service">服务中心</el-menu-item>
          <el-menu-item index="returns">售后记录</el-menu-item>
          <el-menu-item index="help">帮助中心</el-menu-item>
        </el-menu>
      <!-- </el-aside> -->

      <!-- 右侧内容区 -->
      <el-main>
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 当前选中的左侧菜单项名称
const selectedMenuItem = ref('订单管理')
const searchKeyword = ref('')

// 菜单映射关系
// ... existing code ...
const menuItemMap = {
  profile: '/Membercenter/account',
  messages: '/Membercenter/messages',
  security: '/Membercenter/security',
  points: '/Membercenter/points',
  favorites: '/Membercenter/favorites',
  footprints: '/Membercenter/footprints',
  transactions: '/Membercenter/transactions',
  orders: '/Membercenter/order-management',
  coupons: '/Membercenter/coupons',
  service: '/Membercenter/service',
  returns: '/Membercenter/returns',
  help: '/Membercenter/help-center'
}


// 点击左侧菜单时跳转到相应页面
const handleMenuSelect = (index) => {
  console.log(index,menuItemMap[index])
  router.push(menuItemMap[index])
}

const handleSearch = () => {}
</script>

<style scoped>
.order-management {
  display: flex;
  flex-direction: column;
  padding: 20px;
  position: relative;
  min-height: 80vh;
}

.search-bar {
  margin: 20px 0;
  width: 400px;
  z-index: 10;
}

.layout-container {
  display: flex;
  margin-top: 20px;
}

.el-aside {
  width: 200px;
  min-height: 600px;
  overflow-y: auto;
  border-right: 1px solid #e6e6e6;
  background-color: #f8f8f8;
}

.el-main {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-left: 20px;
  min-height: 600px;
  overflow-y: auto;
}
</style>